import React, { FC } from "react";
import classNames from "classnames/bind";
import style from "./index.module.scss";
import { Typography, Empty, Table, Tag, Button, Flex, Modal, Divider, Spin, message } from "antd";
import { ExclamationCircleFilled } from "@ant-design/icons";
import SearchInput from "../../components/SearchIput";
import useGetQuestionByKey from "../../hooks/useGetQuestionByKey";
import { updateQuestionData, DeleteQuestionData } from "../../service";
import { useRequest } from "ahooks";
import { useState } from "react";
import PaginationConfig from "../../components/PaginationConfig";
const BCN = classNames.bind(style);
const { Title } = Typography;

interface questionItem {
  id: string;
  title: string;
  isPublished: boolean;
  isStart: boolean;
  isDelete: boolean;
  answerCount: number;
  createTime: string;
}
type resType = {
  list: questionItem[];
  total: number;
};

const QuestionTrash: FC = () => {
  // const [data] = useState(roiginData);
  const { data = {}, loading, refresh } = useGetQuestionByKey({ isDelete: true });
  const { list = [], total = 0 } = data as resType;

  const [selectdata, setselectdata] = useState<string[]>([]);

  const columns = [
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "是否发布",
      dataIndex: "isPublished",
      key: "isPublished",
      render: (text: boolean) => <a>{text ? <Tag color="processing">已发布</Tag> : <Tag color="default">未发布</Tag>}</a>,
    },
    {
      title: "答卷",
      dataIndex: "answerCount",
      key: "answerCount",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
    },
  ];
  //批量恢复
  const { run: resetData } = useRequest(
    async () => {
      for await (const id of selectdata) {
        await updateQuestionData(id, { isDelete: false });
      }
    },
    {
      manual: true,
      debounceWait: 500,
      onSuccess() {
        message.success("恢复成功！");
        setselectdata([]);
        refresh();
      },
    },
  );
  //批量删除
  const { run: deleteData } = useRequest(
    async () => {
      const res = await DeleteQuestionData(selectdata);
      return res;
    },
    {
      manual: true,
      debounceWait: 500,
      onSuccess() {
        message.success("删除成功！");
        setselectdata([]);
        refresh();
      },
    },
  );
  // const deleteData = () => {};

  const { confirm } = Modal;

  const showConfirm = () => {
    confirm({
      title: "确实是否移除回收站?",
      icon: <ExclamationCircleFilled />,
      content: "删除后无法找回",
      onOk() {
        deleteData();
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };

  const Tabbleant = (
    <>
      <Flex gap="middle">
        <Button
          type="primary"
          disabled={selectdata.length == 0}
          onClick={() => {
            resetData();
          }}
        >
          恢复
        </Button>
        <Button danger disabled={selectdata.length == 0} onClick={showConfirm}>
          选中删除
        </Button>
      </Flex>
      <Divider style={{ borderColor: "transparent", margin: "10px 10px" }}></Divider>
      <Table
        pagination={false}
        rowKey={(record) => record.id}
        rowSelection={{
          type: "checkbox",
          onChange: (selectedRowKeys: React.Key[], selectedRows: questionItem[]) => {
            setselectdata(selectedRowKeys as string[]);
          },
        }}
        dataSource={list}
        columns={columns}
      />
    </>
  );

  return (
    <div className={BCN("QuestionTrash1")}>
      <div className={BCN("head")}>
        <Title level={3} className={BCN("left")}>
          回收站
        </Title>
        <div className={BCN("right")}>
          {/* <input className={BCN("searcInput")}></input> */}
          <SearchInput></SearchInput>
        </div>
      </div>
      <div className={BCN("container")}>
        <Spin spinning={loading}>
          {list.length == 0 && <Empty description="暂时无数据" />}
          {list.length > 0 && Tabbleant}
        </Spin>
      </div>
      <div className={BCN("foot")}>
        <PaginationConfig total={total}></PaginationConfig>
      </div>
    </div>
  );
};
export default QuestionTrash;
